<template>
  <div>
    <el-button size="small" type="primary" @click="showDialog()"
        >新增</el-button
      >
    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column
        prop="levelName"
        label="会员等级"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column label="价格类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.priceType }}
        </template>
      </el-table-column>
      <el-table-column
        prop="levelDesc"
        label="会员描述"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ new Date(scope.row.addTime).Format('YYYY-MM-DD hh:mm:ss') }}
        </template>
      </el-table-column>
      
      <el-table-column
        label="操作"
        align="center"
        width="300"
        class-name="actionTd"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            round
            @click="showDialog(scope.row)"
            type="primary"
          >
            编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="editData.id ? '编辑' : '新增'"
      :visible.sync="levelVisible"
      :close-on-click-modal="false"
      width="70%"
    >
      <el-form
        :model="editData"
        label-width="140px"
        size="small"
        :inline="true"
      >
        <el-form-item label="会员等级名称">
          <el-input :disabled="editData.id" v-model="editData.levelName"></el-input>
        </el-form-item>

        <el-form-item label="会员描述">
          <el-input :disabled="editData.id" v-model="editData.levelDesc"></el-input>
        </el-form-item>
        <!-- <el-form-item label="会员折扣">
          <el-input v-model="editData.levelDiscount">
            <template slot="append">%</template>
          </el-input>
        </el-form-item> -->
        <el-form-item label="价格类型:">
        <el-select
          v-model="editData.priceType"
          placeholder="请选择"
          filterable
          clearable
        >
          <el-option label="1" :value="1"></el-option>
          <el-option label="2" :value="2"></el-option>
          <el-option label="3" :value="3"></el-option>
          <el-option label="4" :value="4"></el-option>
        </el-select>
      </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer text-c">
        <el-button size="small" round @click="levelVisible = false"
          >取 消</el-button
        >
        <el-button size="small" round type="primary" @click="levelSubmit()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      levelVisible: false,
      editData: {
        levelName: '',
        levelDesc: '',
        priceType: ''
      },
    }
  },
  beforeMount() {
    this.getDataList()
  },
  activated() {
    this.getDataList()
  },
  methods: {
    showDialog(item) {
      this.$nextTick(() => {
        this.levelVisible = true
      })
      if(item) {
        this.editData = item
      } else {
        this.editData =  {
        levelName: '',
        levelDesc: '',
        priceType: ''
        }
      }
    },
    getDataList() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      this.$ajax
        .getData('adm/level/getList')
        .then((data) => {
          console.log(data.resData)
          loading.close()
          this.tableData = data.resData
        })
        .catch((error) => {
          loading.close()
          this.$message({
            message: error.codeDes || error.message,
            type: 'error',
          })
        })
    },
    levelSubmit() {
      if (!this.editData.levelName) {
        this.$message({
          message: '请输入会员等级名称',
          type: 'warning'
        });
        return false;
      }
      if (!this.editData.levelDesc) {
        this.$message({
          message: '请输入会员描述',
          type: 'warning'
        });
        return false;
      }
      if (!this.editData.priceType) {
        this.$message({
          message: '请选择价格类型',
          type: 'warning'
        });
        return false;
      }
      let params = {
        ...this.editData,
      };
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$ajax
        .postData('adm/level/setLevel', params)
        .then((data) => {
          loading.close();
          this.getDataList();
          this.levelVisible = false;
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: 'error'
          });
        });
    }
  },
}
</script>
<style lang="scss" scoped></style>
